<template>
  <!-- 通知公告详情 -->
  <section class="center">
    <p class="notice-title">{{ formData.noticeTitle }}</p>
    <article class="article">
      <p class="notice-time">
        <span>{{ formData.createTime }}</span>
        <span>来源：{{ formData.enterpriseName }}</span>
      </p>
      <div class="content" v-html="formData.noticeContent" />
      <p class="editor">责任编辑：{{ formData.createName }}</p>
    </article>
  </section>
</template>

<script>
import { noticeDtailNo } from '@/api/home'
export default {
  name: 'NoticeDetail',
  data() {
    return {
      // 公告详情
      formData: {
        noticeId: '',
        noticeTitle: '',
        noticeContent: '',
        createName: '',
        createTime: '',
        noticeType: '',
        enterpriseName: ''
      }
    }
  },
  mounted() {
    const { id } = this.$route.query
    this.getDetailById(id)
  },
  methods: {
    // 获取详情
    async getDetailById(id) {
      const { data } = await noticeDtailNo(id)
      this.formData = { ...data }
    }
  }
}
</script>

<style lang='scss' scoped>
.center {
  padding:10px 15px;
  margin: 0 auto;
  height: 100%;
  overflow: auto;
  .notice-title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #333;
  }
  .article {
    .notice-time {
      font-size: 14px;
      color: #999;
      padding-bottom: 15px;
      border-bottom: 1px solid #999;
      span {
        margin-right: 15px;
      }
    }
    .editor {
      color: #999;
      font-size: 14px;
    }
    .content {
      color: #333;
    }
  }
}
</style>
